<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
    <title>天量科技管理后台</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width">
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="css/templatemo_main.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="app" ng-controller="index">
<div class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <div class="logo"><h1>天量科技管理后台</h1></div>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
</div>
<div class="template-page-wrapper">
    <div class="navbar-collapse collapse templatemo-sidebar">
        <ul class="templatemo-sidebar-menu">
            <li>
                <form class="navbar-form">
                    欢迎您:{{user.name || '访客'}}</span>
                </form>
            </li>
            <li ng-repeat="menu in menus" ng-class="menu.menuclass" ng-click="menuclick(menu)">
                <a ng-click="redi(menu.url)" ng-if="menu.items.length==0"><i ng-class="menu.icon"></i>{{menu.label}}</a>
                <a href="#" ng-if="menu.items.length>0">
                    <i ng-class="menu.icon"></i> {{menu.label}}
                    <div class="pull-right"><span class="caret"></span></div>
                </a>
                <ul class="templatemo-submenu" ng-if="menu.items.length>0">
                    <li ng-repeat="item in menu.items" ng-click="redi(item.url)"><a href="javascript:void(0)">{{item.label}}</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" data-toggle="modal" data-target="#confirmModal"><i class="fa fa-sign-out"></i>退出登录</a>
            </li>
        </ul>
    </div><!--/.navbar-collapse -->

    <div class="templatemo-content-wrapper">
        <div class="templatemo-content">
            <ol class="breadcrumb">
                <li><a ng-click="redi('index.html')" href="javascript:void(0)">首页</a></li>
            </ol>

            <div class="row" ng-if="haserror">
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <strong>发生异常情况:{{errormessage}}</strong>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 margin-bottom-15">
                    <label for="from">从</label>
                    <input type="date" class="form-control" id="from" ng-model="from">
                </div>
                <div class="col-md-3 margin-bottom-15">
                    <label for="to">查到</label>
                    <input type="date" class="form-control" id="to" ng-model="to">
                </div>
                <div class="col-md-3 margin-bottom-15">
                    <label>价格类型</label>
                    <p><select ng-model="td" ng-options="v.label for (k,v) in tds" ng-change="query()"></select></p>
                </div>
                <div class="col-md-3 margin-bottom-15">
                    <label>K线周期</label>
                    <p><select ng-model="period" ng-options="v.label for (k,v) in periods" ng-change="query()"></select></p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 margin-bottom-15">
                    <label>压力支撑位计算方式</label>
                    <p><select ng-model="vm" ng-options="v.label for (k,v) in vms" ng-change="query()"></select></p>
                </div>
                <div class="col-md-3 margin-bottom-15">
                    <label>压力支撑位K柱数</label>
                    <p><select ng-model="vday" ng-options="v.label for (k,v) in vdays" ng-change="query()"></select></p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 margin-bottom-15">
                    <label>泰坦值计算方式</label>
                    <p><select ng-model="titans" ng-options="v.label for (k,v) in titanss" ng-change="query()"></select></p>
                </div>
                <div class="col-md-3 margin-bottom-15">
                    <label>泰坦值类型</label>
                    <p><select ng-model="titansType" ng-options="v.value for (k,v) in titansTypes" ng-change="query()"></select></p>
                </div>
                <div class="col-md-3 margin-bottom-15">
                    <label>泰坦值K线个数</label>
                    <p><input ng-model="titansk"  type="number" class="form-control" id="titansk" size="5"></p>
                </div>
                <div class="col-md-3 margin-bottom-15">
                    <label>泰坦值系数</label>
                    <p><input ng-model="titansr"  type="number" class="form-control" id="titansr" size="5"></p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 margin-bottom-15">
                    <button type="submit" class="btn btn-primary" ng-click="query()">刷新</button>
                </div>
            </div>
            <div class="templatemo-charts">
                <div class="templatemo-chart-box col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div id="chartcanvas" style="width:{{wWidth*0.8}}px;height:{{wHeigth*0.7}}px;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">确定退出吗</h4>
                </div>
                <div class="modal-footer">
                    <a ng-click="logout()" class="btn btn-primary" data-dismiss="modal">确定</a>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <footer class="templatemo-footer">
        <div class="templatemo-copyright">
            <p>Copyright &copy; 2018 By <a href="http://skyquant.cn" title="天量科技" target="_blank">天量科技</a></p>
        </div>
    </footer>
</div>
</body>

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/common.js"></script>
<script src="js/chart.js"></script>
<script src="js/templatemo_script.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<script type="text/javascript">
  'use strict';
  var app = angular.module('app', []);
  app.config(['$locationProvider', function ($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
  }]);
  app.controller('index', ['$scope', '$http','$location', '$filter','$window',function ($scope, $http,$location,$filter,$window) {
      //每个页面都要有的方法begin
      $scope.init = function(){
        $scope.wHeigth=$window.innerHeight;//获取屏幕的高度
        $scope.wWidth=$window.innerWidth;//获取屏幕的宽度
        var symbol = $location.search().symbol;
        if(symbol=='' || symbol==null || symbol=='undefined'){
           $scope.haserror = true;
           $scope.errormessage = '参数不正确，请从外汇页面进入';
           return;
        }
        $scope.symbol = symbol;
        getUser($http,$scope,'外汇','市场信息');
      }

      $scope.logout = function(){
        logout($http);
      }

      $scope.menuclick=function(menu){
        changemenuclass($scope,menu);
      }

      $scope.redi=function(url){
          location.href = url;
      }

      //每个页面都需要重写此方法，发生在init之后
      $scope.initAfter = function(){
         $scope.to = new Date(new Date() - 86400000);
         $scope.from = new Date(new Date() - 86400000*91);

        $http.get('quant4j-service/enum/TitansType').success(function(data) {
              $scope.titansTypes = data.data;
              $scope.titansType = $scope.titansTypes[0];
                $scope.query();
         }).error(function(data,status,headers,config){

         });
      }

      $scope.query = function(){
        var url = '/quant4j-service/jforex/bars';
        url += '?symbol='+$scope.symbol;
        url += '&period='+$scope.period.value;
        url += '&td='+$scope.td.value;
        url += '&vday='+$scope.vday.value;
        url += '&vm='+$scope.vm.value;
        url += '&titans='+$scope.titans.value;
        url += '&titansk='+$scope.titansk;
        url += '&titansr='+$scope.titansr;
        url += '&titansType='+$scope.titansType.key;
        url += '&from='+$filter('date')($scope.from,'yyyyMMdd')+'000000';
        url += '&to='+$filter('date')($scope.to,'yyyyMMdd')+'000000';
        $http.get(url).success(function(data) {
          if(data.ok){
            initchart($scope.symbol,data.data);
            $scope.haserror = false;
            $scope.errormessage = "";
          }else{
            $scope.haserror = true;
            $scope.errormessage = data.message;
          }
        }).error(function(data,status,headers,config){
           $scope.haserror = true;
           $scope.errormessage = data.message;
        });
      }

      $scope.init();
      $scope.tds  = [
        {value : "LONG", label : "买入价"},
        {value : "SHORT", label : "卖出价"}
      ];
      $scope.td = $scope.tds[0];
      $scope.periods  = [
        {value : "m15", label : "15分钟", timesecond:15*60},
        {value : "m30", label : "30分钟", timesecond:1800},
        {value : "h1", label : "1小时", timesecond:3600},
        {value : "h4", label : "4小时", timesecond:14400},
        {value : "daily", label : "1天", timesecond:86400},
        {value : "week", label : "1周", timesecond:86400*7},
        {value : "month", label : "1月", timesecond:86400*30}
      ];
      $scope.period = $scope.periods[4];
      $scope.vdays  = [
        {value : "3", label : "3根K柱"},
        {value : "5", label : "5根K柱"},
        {value : "7", label : "7根K柱"},
        {value : "9", label : "9根K柱"}
      ];
      $scope.vms  = [
        {value : "0", label : "不计算"},
        {value : "1", label : "方法1"},
        {value : "2", label : "方法2"}
      ];
      $scope.titanss  = [
        {value : "0", label : "不计算"},
        {value : "1", label : "方法1"},
      ];
      $scope.vday = $scope.vdays[2];
      $scope.vm = $scope.vms[0];
      $scope.titans = $scope.titanss[0];
      $scope.titansk = 7;
      $scope.titansr = 0.2;
  }]);

  function initchart(symbol,data){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartcanvas'));
        myChart.clear();
        var legenddata = ['K线'];
        var seriesdata = [
            {
                type: 'candlestick',
                name: 'K线',
                data: data.bars.map(function(item) {
                  return [item[1], item[2], item[3], item[4]];
                }),
                itemStyle: {
                    normal: {
                        color: upColor,
                        color0: downColor,
                        borderColor: '#FD1050',
                        borderColor0: '#0CF49B'
                    }
                }
            },
            {
                name: 'volumn',
                type: 'bar',
                data:  data.bars.map(function(item) {
                  return item[5];
                }),
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                  normal: {
                    color: function(params) {
                      var colorList;
                      if (data.bars[params.dataIndex][1] <= data.bars[params.dataIndex][2]) {
                          colorList = upColor;
                      } else {
                          colorList = downColor;
                      }
                      return colorList;
                    },
                  }
                }
            }
        ];
        if(data.vs != undefined){
            legenddata.push('压力位');
            var ylw = {
                name: '压力位',
                type: 'scatter',
                symbol: 'image://../images/arrow/r_d_32.png',
                symbolSize: 32,
                data: data.rvs.map(function(item) {
                  return [item[0], item[2]];
                }),
            };
            seriesdata.push(ylw);
        }
        if(data.rvs !=undefined){
            legenddata.push('支撑位');
            var zcw = {
                name: '支撑位',
                type: 'scatter',
                data: data.vs.map(function(item) {
                  return [item[0], item[2]];
                }),
                symbol: 'image://../images/arrow/g_u_32.png',
                symbolSize: 32,
            }
            seriesdata.push(zcw);
        }
        if(data.waves !=undefined){
            legenddata.push('波段');
            var wave={
                name: '波段',
                type: 'line',
                data: data.waves,
                smooth: true,
                showSymbol: true,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                }
            };
            seriesdata.push(wave);
        }
        if(data.longs!=undefined){
            legenddata.push('多');
            var longs = {
                name: '多',
                type: 'scatter',
                data: data.longs.map(function(item) {
                  return [item[0], item[2]];
                }),
                symbol: 'image://../images/arrow/arrow_up_red_32.png',
            }
            seriesdata.push(longs);
        }
        if(data.shorts!=undefined){
            legenddata.push('空');
            var shorts = {
                name: '空',
                type: 'scatter',
                data: data.shorts.map(function(item) {
                  return [item[0], item[2]];
                }),
                symbol: 'image://../images/arrow/arrow_down_green_32.png'
            }
            seriesdata.push(shorts);
        }
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: symbol,
            left: 0
          },
          legend: {
              data: legenddata
          },
          itemStyle: {
              normal: {
                  color: upColor,
                  color0: downColor,
                  borderColor: upBorderColor,
                  borderColor0: downBorderColor
              }
          },
          tooltip: {
              trigger: 'item',
              axisPointer: {
                  type: 'cross'
              },
              formatter: function(params) {
                 if(params.seriesName=='K线'){
                    return '开盘:'+params.value[1]+'<br>'
                        +'收盘:'+params.value[2]+'<br>'
                        +'最高:'+params.value[3]+'<br>'
                        +'最低:'+params.value[4];
                 }else if(params.seriesName=='volumn'){
                    return params.value;
                 }else if(params.seriesName=='支撑位'){
                    return data.vs[params.dataIndex][1];
                 }if(params.seriesName=='压力位'){
                    return data.rvs[params.dataIndex][1];
                 }else{
                    return '';
                 }
              }
          },
          grid:[
            {
                left: '10%',
                right: '8%',
                height: '50%'
            },
            {
                left: '10%',
                right: '8%',
                top: '63%',
                height: '16%'
            }
          ],
          xAxis: [{
              type: 'category',
              data: data.labels,
              axisLine: { lineStyle: { color: '#8392A5' } },
              splitNumber: 20,
              splitLine: {show: false},
          },{
              type: 'category',
              gridIndex: 1,
              data: data.labels,
              axisLabel: {show: false}
          }],
          yAxis: [{
              scale: true,
              axisLine: { lineStyle: { color: '#8392A5' } },
              splitLine: { show: true },
              splitArea: {show: true }
          },{
              type :"value",
              scale: false,
              gridIndex: 1,
              splitLine: { show: false },
              splitArea: {show: false }
          }],
          dataZoom: [
          {
              type: 'slider',
              show: false,
              yAxisIndex: [0],
              left: '96%',
              bottom: '5%',
              start: 0,
              end: 100
          },
            {
                show: true,
                type: 'slider',
                y: '90%',
                start: 0,
                end: 100
            }
          ],
          series:seriesdata
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
  }
</script>
</html>